---
title: AlertDialog | gluestack-ui | Installation, Usage, and API

description: AlertDialog effectively interrupts a user's flow and prompts them to take a specific action. It's commonly used for mandatory confirmations or call-to-actions.

pageTitle: AlertDialog

pageDescription: AlertDialog effectively interrupts a user's flow and prompts them to take a specific action. It's commonly used for mandatory confirmations or call-to-actions.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="ui/Components/Overlay/AlertDialog" />

import {
  CloseIcon,
  Button,
  ButtonText,
  ButtonGroup,
  Center,
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogCloseButton,
  AlertDialogFooter,
  AlertDialogBody,
} from './AlertDialog';
import { HStack, AlertTriangleIcon } from './AlertDialog';
import { Heading, Icon, AlertCircleIcon } from './AlertDialog';
import { Text, CheckCircleIcon } from './AlertDialog';
import { transformedCode } from '../../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
} from '@gluestack/design-system';

import Wrapper from '../../Wrapper';

This is an illustration of a **Themed AlertDialog** component with default configuration.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function Example(){
          const [showAlertDialog, setShowAlertDialog] = React.useState(false);
          return (
            <Center h={300}>
              <Button onPress={() => setShowAlertDialog(true)}>
                <ButtonText>Click me</ButtonText>
              </Button>
              <AlertDialog
                isOpen={showAlertDialog}
                onClose={() => {
                setShowAlertDialog(false);
                }}
              >
                <AlertDialogBackdrop />
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <Heading size='lg'>Deactivate account</Heading>
                    <AlertDialogCloseButton>
                      <Icon as={CloseIcon} />
                    </AlertDialogCloseButton>
                  </AlertDialogHeader>
                  <AlertDialogBody>
                    <Text size='sm'>
                      Are you sure you want to deactivate your account? Your data will be permanently removed and cannot be undone.
                    </Text>
                  </AlertDialogBody>
                  <AlertDialogFooter>
                   <ButtonGroup space="lg">
                    <Button
                      variant="outline"
                      action="secondary"
                      onPress={() => {
                        setShowAlertDialog(false);
                      }}
                    >
                      <ButtonText>Cancel</ButtonText>
                    </Button>
                    <Button
                      bg='$error600'
                      action="negative"
                      onPress={() => {
                        setShowAlertDialog(false);
                      }}
                    >
                      <ButtonText>Deactivate</ButtonText>
                    </Button>
                     </ButtonGroup>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </Center>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'Example');
      },
      scope: {
        Wrapper,
        AlertDialog,
        AlertDialogBackdrop,
        AlertDialogContent,
        AlertDialogHeader,
        AlertDialogCloseButton,
        AlertDialogFooter,
        AlertDialogBody,
        CloseIcon,
        Button,
        ButtonText,
        ButtonGroup,
        Center,
        Text,
        Heading,
        Icon,
        AlertCircleIcon,
      },
      argsType: {},
    }}
  />
</AppProvider>

<br />

## API Reference

### Import

To use this component in your project, include the following import statement in your file.

```jsx
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogCloseButton,
  AlertDialogFooter,
  AlertDialogBody,
} from '@gluestack-ui/themed';
```

### Anatomy

The structure provided below can help you identify and understand a AlertDialog component's various parts.

```jsx
export default () => (
  <AlertDialog>
    <AlertDialogBackdrop />
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogCloseButton />
      </AlertDialogHeader>
      <AlertDialogBody />
      <AlertDialogFooter />
    </AlertDialogContent>
  </AlertDialog>
);
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### AlertDialog

Contains all View related layout style props and actions.
It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<AppProvider>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the alert-dialog will open. Useful for controllable state behavior.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onClose</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`() => any`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Callback invoked when the alert-dialog is closed.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>useRNModal</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, renders react-native native modal. (Only works in react-native)`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>defaultIsOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Specifies the default open state of the AlertDialog`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>initialFocusRef</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`React.RefObject<any>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The ref of element to receive focus when the alert-dialog opens.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>finalFocusRef</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`React.RefObject<any>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The ref of element to receive focus when the alert-dialog closes.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>avoidKeyboard</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the AlertDialog will avoid the keyboard.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>closeOnOverlayClick</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>true</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the AlertDialog will close when the overlay is clicked.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isKeyboardDismissable</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>true</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the keyboard can dismiss the AlertDialog`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>animationPreset</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>slide &#124; fade</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>slide</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Specifies the animation preset for the AlertDialog`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</AppProvider>

**Descendants Styling Props**
Props to style child components.

<AppProvider>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Sx Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_content</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style AlertDialogContent Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>

  </TableContainer>
</AppProvider>

#### AlertDialogBackdrop

It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer.

#### AlertDialogContent

It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. You can use any declarative animation library you prefer.

#### AlertDialogCloseButton

It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.

**Descendants Styling Props**
Props to style child components.

<AppProvider>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Sx Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_text</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style AlertDialogCloseButton  Text Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_icon</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style AlertDialogCloseButton  Icon Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</AppProvider>

#### AlertDialogHeader

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### AlertDialogBody

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### AlertDialogFooter

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

### Accessibility

We have outlined the various features that ensure the AlertDialog component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.It uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/) which follows the [WAI-ARIA Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).

## Themed

The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library).

### Props

AlertDialog component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.

#### AlertDialog

<AppProvider>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Name</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Value</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>size</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>xs | sm | md | lg | full</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>md</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</AppProvider>

> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.

### Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

#### AlertDialog with semantic icon

An example of an AlertDialog component incorporating an icon component for visually representing important information or actions.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
      function App(){
        const [showAlertDialog, setShowAlertDialog] = React.useState(false);
        return (
          <>
            <Center h={300} >
                <Button onPress={() => setShowAlertDialog(true)}>
                    <ButtonText>Click me</ButtonText>
                </Button>
            </Center>
            <AlertDialog
              isOpen={showAlertDialog}
              onClose={() => {
                  setShowAlertDialog(false);
              }}
            >
                  <AlertDialogBackdrop/>
              <AlertDialogContent>
              <AlertDialogHeader borderBottomWidth='$0'>
                 <HStack space='sm' alignItems='center'>
                  <Icon as={CheckCircleIcon} color='$success700' 
                  $dark-color='$success300' />
                    <Heading size='lg'>Order placed</Heading>
                  </HStack>
                </AlertDialogHeader>
                <AlertDialogBody>
                    <Text size="sm">
                    Congratulations, your order has been placed! You will receive a confirmation email shortly. Thank you for shopping with us.
                    </Text>
                </AlertDialogBody>
                 <AlertDialogFooter  borderTopWidth='$0'>
                  <Button
                    variant="outline"
                    size="sm"
                    action="secondary"
                    mr="$3"
                    onPress={() => {
                      setShowAlertDialog(false);
                    }}
                  >
                    <ButtonText>Okay</ButtonText>
                  </Button>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </>
        );
      }
    `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Button,
        ButtonText,
        Center,
        Wrapper,
        AlertDialog,
        AlertDialogBackdrop,
        AlertDialogContent,
        AlertDialogHeader,
        AlertDialogCloseButton,
        AlertDialogFooter,
        AlertDialogBody,
        Icon,
        Text,
        HStack,
        AlertTriangleIcon,
        CheckCircleIcon,
        Heading,
      },
      argsType: {},
    }}
  />
</AppProvider>

#### AlertDialog Sizes

An AlertDialog component with adjustable sizes, providing flexible and visually appealing pop-up notifications and interactive prompts to users.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={true}
    metaData={{
      code: `
      function App(){
        const [showAlertDialog, setShowAlertDialog] = React.useState(false);
        return (
          <>
       <Center h={300} >
                <Button onPress={() => setShowAlertDialog(true)}>
                    <ButtonText>Click me</ButtonText>
                </Button>
            </Center>
            <AlertDialog
              isOpen={showAlertDialog}
              onClose={() => {
                  setShowAlertDialog(false);
              }}
              {...props}
            >
                  <AlertDialogBackdrop/>
              <AlertDialogContent>
              <AlertDialogHeader borderBottomWidth='$0'>
                 <HStack space='sm' alignItems='center'>
                  <Icon as={AlertTriangleIcon} color='$error700'  />
                    <Heading size='lg'>Order placed</Heading>
                  </HStack>
                </AlertDialogHeader>
                <AlertDialogBody>
                    <Text>
                     You have exceeded your monthly upload limit. Please upgrade to a premium account to continue uploading.
                  </Text>
                </AlertDialogBody>
                 <AlertDialogFooter  borderTopWidth='$0'>
                   <ButtonGroup space="lg">
              <Button
                variant="outline"
                action="secondary"
                onPress={() => {
                  setShowAlertDialog(false)
                }}
              >
                <ButtonText fontSizes="$md">Close</ButtonText>
              </Button>
                <Button
                action="primary"
                onPress={() => {
                  setShowAlertDialog(false)
                }}
                bgColor="$darkBlue700"
              >
                <ButtonText>View plans</ButtonText>
              </Button>
                    </ButtonGroup >
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </>
        );
      }
    `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Button,
        ButtonText,
        ButtonGroup,
        Center,
        Wrapper,
        AlertDialog,
        AlertDialogBackdrop,
        AlertDialogContent,
        AlertDialogHeader,
        AlertDialogCloseButton,
        AlertDialogFooter,
        AlertDialogBody,
        Icon,
        Text,
        HStack,
        AlertTriangleIcon,
        CheckCircleIcon,
        Heading,
      },
      argsType: {
        size: {
          control: 'select',
          options: ['xs', 'sm', 'md', 'lg', 'full'],
          default: 'md',
        },
      },
    }}
  />
</AppProvider>

## Unstyled

All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.

<!--

### Advanced

We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

### Customizing the AlertDialog

We have a function called `createAlertDialog` which can be used to create a custom alert-dialog component. This function takes in a configuration object which contains the styled components that you want to use for the alert-dialog. You can refer [gluestack.io/style](/style) for more information on how to use styled components.

You can read more on how to animate components [here](/ui/docs/advanced/animations).

#### Usage

Default styling of all these components can be found in the `components/core/alert-dialog` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/AlertDialog) of the styled `AlertDialog` components.

```jsx
// import the styles
import {
  Root,
  Content,
  CloseButton,
  Header,
  Footer,
  Body,
  Backdrop,
} from '../components/core/alert-dialog/styled-components';

// import the createAlertDialog function
import { createAlertDialog } from '@gluestack-ui/alert-dialog';

// Understanding the API
const AlertDialog = createAlertDialog({
  Root,
  Content,
  CloseButton,
  Header,
  Footer,
  Body,
  Backdrop,
});

// Using the alert-dialog component
export default () => (
  <AlertDialog>
    <AlertDialogBackdrop />
    <AlertDialogContent>
      <AlertDialogHeader>
        <Heading>Confirm your request</Heading>
        <AlertDialogCloseButton>
          <CloseIcon />
        </AlertDialogCloseButton>
      </AlertDialogHeader>
      <AlertDialogBody>
        <Text>AlertDialog Body</Text>
      </AlertDialogBody>
      <AlertDialogFooter>
        <Button>
          <ButtonText>Okay</ButtonText>
        </Button>
        <Button>
          <ButtonText>Close</ButtonText>
        </Button>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
);
```
-->

## Spec Doc

Explore the comprehensive details of the AlertDialog in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.

<iframe
  style={{
    borderRadius: '8px',
    border: ' 1px solid rgba(0, 0, 0, 0.1)',
    aspectRatio: 736 / 585,
  }}
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5653%253A34732%26type%3Ddesign%26node-id%3D5658-36648%26viewport%3D1433%252C11%252C0.08%26t%3DWy4Bx2pKvlcvatlJ-1%26scaling%3Dcontain%26starting-point-node-id%3D5658%253A36648%26mode%3Ddesign"
  allowFullScreen
/>
